<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./assets/css/default.css" />
    <link rel="stylesheet" href="./assets/css/reverse.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <!-- 参考:https://mp.weixin.qq.com/s/xwpBr1gV8feUWknGwJBPlA -->
  </head>
  <body>
    <div id="app">
      <div class="row">
        <div class="col-md-6 col-lg-6 col-xl-5 mx-auto">
          <div class="row justify-content-md-center">
            <div
              v-for="card in cards"
              class="col-auto mb-3 flip-container"
              :class="{ 'flipped': card.isFlipped }"
              @click="flipCard(card)"
            >
              <div class="memorycard">
                <div class="front border rounded shadow">
                  <img
                    width="100"
                    height="150"
                    src="./assets/images/pattern.jpg"
                  />
                </div>
                <div class="back rounded border">
                  <img
                    width="100"
                    height="150"
                    :src="'./assets/images/'+card.img"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    let app = new Vue({
      el: "#app",
      data: {
        cards: [
          { name: "柯南", img: "conan.jpg" },
          { name: "工藤", img: "gongteng.jpg" },
          { name: "基德", img: "jide.jpg" },
          { name: "毛利兰", img: "maolilan.jpg" },
          { name: "荷叶", img: "heye.jpg" },
        ],
      },
      created() {
        this.cards.forEach((card) => {
          this.$set(card, "isFlipped", false);
        });
      },

      methods: {
        flipCard(card) {
          card.isFlipped = true;
        },
      },
    });
  </script>
</html>
